<template>
  <div class="box">
    <!-- 顶部 -->
    <div class="top">
      <div class="left">
        <li>聊天</li>
        <li>互动</li>
      </div>
    </div>
    <!-- 分类 -->
    <div class="fenlei">
      <ul>
        <li>
          <strong>全部</strong>
        </li>
        <li>招呼</li>
        <li>沟通中</li>
      </ul>
      <div class="right">极速处理</div>
    </div>
    <!-- 对话对象 -->
    <div class="talk">
      <div class="item" v-for="item in talklist" v-bind:key="item.key">
        <div class="pic"></div>
        <div class="title">{{item.title}}</div>
        <div class="content">{{item.content}}</div>
        <div class="time">{{item.time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      talklist: [
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        },
        {
          title: "广州光点信息 发布了新职位",
          content: "55位Boss新发布",
          time: "00:27"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  float: left;
}
.box {
  position: relative;
  width: 100vw;
  height: 90vh;
  .top {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 10vh;
    background: #00d7c6;
    z-index: 10;
    .left {
      position: absolute;
      left: 0;
      width: 50vw;
      height: 10vh;
      li {
        width: 20vw;
        height: 10vh;
        color: white;
        font-size: 20px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
      }
    }
  }
  .fenlei {
    position: fixed;
    top: 10vh;
    width: 100vw;
    height: 8vh;
    z-index: 10;
    background: white;
    ul {
      position: absolute;
      top: 50%;
      left: 25px;
      margin-top: -10px;
      width: 60%;
      li {
        margin-right: 20px;
      }
    }
    .right {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      right: 10px;
      color: #aaaaaa;
      font-size: 14px;
      padding: 5px;
      border: 1px solid #aaaaaa;
    }
  }
  .talk {
    position: absolute;
    top: 20%;
    background: #eeeeee;

    width: 100%;
    height: 80%;
    .item {
      position: relative;
      width: 100%;
      height: 15%;
      border-top: 1px solid #cccccc;
      background: white;
      .pic {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 13%;
        height: 60%;
        border: 1px solid black;
      }
      .title {
        position: absolute;
        top: 25%;
        left: 25%;
        // border: 1px solid black;
      }
      .content {
        position: absolute;
        bottom: 25%;
        left: 25%;
        color: #aaaaaa;
      }
      .time {
        position: absolute;
        top: 20%;
        right: 5%;
        color: #aaaaaa;
      }
    }
  }
}
</style>
